<template>
  <div style="display: flex; justify-content: space-between" class="container">
    <a-tabs
        style="width: 100%"
        :active-key="activeKey"
        @change="handleTabChange"
    >

      <a-tab-pane key="0" title="抖音">
        <detail_list v-if="whetherLoad[0]" :platform="map[0]"></detail_list>
      </a-tab-pane>
      <a-tab-pane key="1" title="小红书">
        <detail_list v-if="whetherLoad[1]" :platform="map[1]"></detail_list>
      </a-tab-pane>
      <a-tab-pane key="2" title="知乎">
        <detail_list v-if="whetherLoad[2]" :platform="map[2]"></detail_list>
      </a-tab-pane>
      <a-tab-pane key="3" title="微信公众号">
        <detail_list v-if="whetherLoad[3]" :platform="map[3]"></detail_list>
      </a-tab-pane>
      <a-tab-pane key="4" title="微信视频号">
        <detail_list v-if="whetherLoad[4]" :platform="map[4]"></detail_list>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup>
import {ref, onMounted} from "vue";
import {detailData} from "../../api/monitorManageMG.js";
import {useRoute} from "vue-router";
import detail_list from "./components/detail_list.vue"

import {Message} from "@arco-design/web-vue";
// ---------------------------------------------------------
// 获取详情数据
// 切换tab相关
const route = useRoute()
// 平台名称
const platform = ref(route.query.platform)
console.log(platform)
const activeKey = ref("1");
activeKey.value = platform.value
const map = ["抖音", "小红书", "知乎", "微信公众号", "微信视频号"];
const whetherLoad = [false, false, false, false, false]
whetherLoad[activeKey.value] = true

// 当标签切换时
const handleTabChange = async (key) => {
  activeKey.value = key
  whetherLoad[activeKey.value] = true
};
</script>
<style scoped>

</style>